<template>
	<div class="yue-wrapper">
		<!-- 返回首页 -->
		<uni-bankhome />
		<u-navbar :custom-back="back" :title="title"></u-navbar>
		<div class="money-wrapper">
			<div class="box" v-if="type=='RECHARGE'">
				<div class="deposit">充值余额</div>
				<div class="money">{{walletNum | unitPrice }}</div>

			</div>
			<div class="box" v-if="type=='PROMOTE'">
				<div class="deposit">推广收入</div>
				<div class="money">{{tgMoney | unitPrice }}</div>
			</div>
		</div>
		<div class="operation-btns">
			<div class="operation-btn" v-if="type=='RECHARGE'" @click="navgition('/pages/mine/deposit/recharge')">充值
			</div>
			<div class="operation-btn" v-if="type=='PROMOTE'" @click="navgition('/pages/mine/deposit/withdrawal')">提现
			</div>
		</div>
		<div class="box list" @click="navgition('/pages/mine/deposit/index?type='+type)">
			<div class="list-left" v-if="type=='RECHARGE'">余额变动明细</div>
			<div class="list-left" v-if="type=='PROMOTE'">推广总明细</div>
			<div class="list-right">
				<u-icon name="arrow-right"></u-icon>
			</div>
		</div>
		<div class="box list" v-if="type=='PROMOTE'" @click="navgition('/pages/mine/deposit/Withdrawallist?type='+type)">
			<div class="list-left">推广提现明细</div>
			<div class="list-right">
				<u-icon name="arrow-right"></u-icon>
			</div>
		</div>
	</div>
</template>

<script>
	import {
		getUserWallet,
		GetCommission
	} from "@/api/members";
	export default {
		data() {
			return {
				type: '',
				walletNum: 0,
				tgMoney: 0,
				userInfo: {},
				title: ''
			};
		},
		onLoad(option) {
			this.type = option.type || 'RECHARGE'
			if (this.type == 'RECHARGE') {
				this.title = '余额变动明细'
			}
			if (this.type == 'PROMOTE') {
				this.title = '推广收入'
			}
			uni.setNavigationBarTitle({
				title: this
			})
		},
		mounted() {
			this.initGetCommission()
		},
		onShow() {
			if (this.$options.filters.isLogin("auth")) {
				this.userInfo = this.$options.filters.isLogin();
				getUserWallet().then((res) => {
					this.walletNum = res.data.result.memberWallet;
				}); // 余额
				this.initGetCommission() // 推广收益

			} else {
				uni.showToast({
					icon: "none",
					duration: 3000,
					title: "请先登录！",
				});
				this.$options.filters.navigateToLogin("redirectTo");
			}
		},
		methods: {
			initGetCommission() {
				let params = {
					owner: 'PROMOTE'
				}
				GetCommission(params).then((res) => {
					this.tgMoney = res.data.result.memberWallet
				})
			},
			back() {
				uni.switchTab({
					url: "/pages/tabbar/user/my",
				});
			},
			navgition(url) {
				uni.navigateTo({
					url,
				});
			},
		},
	};
</script>

<style lang="scss" scoped>
	.yue-wrapper {
		.money-wrapper {
			margin-top: 24upx;
			display: flex;
			background: #fff;

			.box {
				flex: 1;
				margin: 20rpx 0;
				border-radius: 20rpx;

				padding: 40rpx;

				.money {
					text-align: center;
					color: #333;
					font-size: 50rpx;
					margin: 20rpx 0 40rpx 0;
					letter-spacing: 2rpx;
				}

				.deposit {
					margin-top: 50rpx;
					text-align: center;
					color: #999;
					font-size: 28rpx;

					letter-spacing: 2rpx;
				}
			}
		}

		.operation-btns {
			padding: 24upx 0;
			display: flex;
			justify-content: center;
			align-items: center;
			background: #fff;

			.operation-btn {
				background: #ee6d41;
				color: #fff;
				height: 90rpx;
				width: 240rpx;
				margin: 0 20rpx;
				border-radius: 10rpx;
				text-align: center;
				line-height: 90rpx;
				font-size: 32rpx;
			}
		}

		.list {
			margin-top: 40upx;
			padding: 36upx;
			display: flex;
			justify-content: center;
			align-items: center;
			background-color: #fff;

			.list-left {
				flex: 8;
			}

			.list-right {
				flex: 2;
				text-align: right;
			}
		}
	}
</style>
